<template>
  <!--底部标签组件-->
  <van-tabbar
    v-model="active"
    active-color="#ff8040d9"
    inactive-color="#949494"
    v-if="tabbarActive"
  >
    <van-tabbar-item name="" to="/">
      <span>首页</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use
            :xlink:href="
              props.active ? '#icon-canguan-copy-copy' : '#icon-canguan-copy'
            "
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="ordering" icon="cart-circle-o" to="/ordering">
      <span>订餐</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use
            :xlink:href="
              props.active
                ? '#icon-wangshangdingcan'
                : '#icon-wangshangdingcan-copy'
            "
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item
      name="user"
      icon="user-o"
      to="/user"
      :badge="
        store.state.user.orderingCount > 0
          ? `${store.state.user.orderingCount}`
          : null
      "
    >
      <span>我的</span>
      <template #icon="props">
        <svg class="icon" aria-hidden="true">
          <use
            :xlink:href="
              props.active
                ? '#icon-db_mgdb_user-copy-copy'
                : '#icon-db_mgdb_user-copy'
            "
          ></use>
        </svg>
      </template>
    </van-tabbar-item>
  </van-tabbar>
  <router-view />
</template>
<script>
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    //标签选中值
    const active = ref("home");
    //组件状态
    const tabbarActive = ref(true);
    const route = useRoute();
    watchEffect(() => {
      //获取路由并修改标签选中值
      active.value = route.fullPath.split("/")[1];
      //路由跳转时---辨别是否在标签页面，控制它的显示隐藏
      if (
        active.value != "" &&
        active.value != "ordering" &&
        active.value != "user"
      ) {
        tabbarActive.value = false;
      } else {
        tabbarActive.value = true;
      }
    });
    return { active, tabbarActive, store };
  },
};
</script>
<style>
.icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
